<template>
    <!--地图容器-->
    <div id="wait-map" class="wait-map"></div>
</template>
<script>
// import Global from "./Global.vue"
export default {
    name:"",
    mounted() {
        // 创建Map实例
        var map = new BMap.Map("wait-map",{enableMapClick:true});
        // 初始化地图,设置中心点坐标和地图级别
        map.centerAndZoom(new BMap.Point(116.4591,39.91965), 16);
        // 设置地图样式
        map.setMapStyle({ styleJson: this.global.mapStyle });
        // 添加地图类型控件
        map.addControl(new BMap.MapTypeControl());
        // 设置地图显示的城市 此项是必须设置的
        map.setCurrentCity("北京");
        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);
        // 设置定时器，对地图进行自动移动
        setTimeout(function(){
            // map.panTo(new BMap.Point(116.3388,40.0696));

            var myIcon = new BMap.Icon("./static/image/location.png",new BMap.Size(32,41));
            var marker = new BMap.Marker(new BMap.Point(116.4591,39.91965),{icon:myIcon});
            map.addOverlay(marker);
        }, 2000);

        setTimeout(function(){
            // map.setZoom(14);
        },4000);

        // 添加折线
        var pointGZ = new BMap.Point(116.401934,39.907552);
        var pointHK = new BMap.Point(116.408328,39.919141);
        setTimeout(function(){
            var polyline = new BMap.Polyline([pointGZ,pointHK],{strokeColor:"blue",strokeWeight:5,strokeOpacity:0.5});
            map.addOverlay(polyline);
        },6000);

        // 添加工具条、比例尺控件
        // map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}));
        // map.addControl(new BMap.NavigationControl());
        // map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL}));

        // 添加自定义控件类，放大ZoomControl
        function ZoomControl() {
            //默认停靠位置和偏移量
            this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
            this.defaultOffset = new BMap.Size(50,23);
        }

        // 通过JavaScript的prototype属性继承于BMap.Control
        ZoomControl.prototype = new BMap.Control();

        // 自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
        // 在本方法中创建div容器，并将其添加到地图容器中
        ZoomControl.prototype.initialize = function(map) {
            // 创建一个DOM元素
            var div = document.createElement("div");
            // 添加文字说明
            div.appendChild(document.createTextNode("放大两级"));
            // 添加样式
            div.style.color = "#40C5CC";
            div.style.cursor = "pointer";
            div.style.border = "3px solid gray";
            div.style.backgroundColor = "#eee";
            // 绑定事件，点击触发
            div.onclick = function(e) {
                map.setZoom(map.getZoom() + 2);
            }
            // 添加DOM元素到地图上
            map.getContainer().appendChild(div);
            // 将DOM元素返回
            return div;
        }
        // 创建控件
        var myZoomCtrl = new ZoomControl();
        map.addControl(myZoomCtrl)

        // 添加添加城市列表控件
        map.addControl(new BMap.CityListControl({
            anchor:BMAP_ANCHOR_BOTTOM_RIGHT,
            offset:new BMap.Size(130,23)
            // 切换城市之间事件
            // onChangeBefore: function(){
            //    alert("before");
            // },
            // 切换城市之后事件
            // onChangeAfter:function(){
            //   alert("after");
            // }
        }));

        // 添加新图标
        // 定义新图标
        var myIcon = new BMap.Icon("./static/image/location.png",new BMap.Size(32,41),{
            anchor: new BMap.Size(32, 41),
            imageOffset: new BMap.Size(16, 41)
        });
        // 创建标注
        var marker = new BMap.Marker(new BMap.Point(116.4035,39.915),{icon:myIcon});
        //将标注放大地图上
        map.addOverlay(marker);

        // 文字提示
        var label = new BMap.Label("文字提示",{offset:new BMap.Size(140,10)});

        marker.setLabel(label);
        // 添加新图标的监听事件
        marker.addEventListener("click",function(){
            var p = marker.getPosition();//获取位置
            alert("点击的位置是：" + p.lng + "," + p.lat);
        })

        var p1 = new BMap.Point(116.401934,39.907552);
        var p2 = new BMap.Point(116.408328,39.919141);

        var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
        // driving.search(p1, p2);


        var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
            scale: 0.6,//图标缩放大小
            strokeColor:'#fff',//设置矢量图标的线填充颜色
            strokeWeight: '2',//设置线宽
        });
        var icons = new BMap.IconSequence(sy, '10', '30');
        // 创建polyline对象
        var pois = [
            new BMap.Point(116.350658,39.938285),
            new BMap.Point(116.386446,39.939281),
            new BMap.Point(116.389034,39.913828),
            new BMap.Point(116.442501,39.914603)
        ];
        var polyline =new BMap.Polyline(pois, {
           enableEditing: false,//是否启用线编辑，默认为false
           enableClicking: true,//是否响应点击事件，默认为true
           icons:[icons],
           strokeWeight:'8',//折线的宽度，以像素为单位
           strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
           strokeColor:"#18a45b" //折线颜色
        });

        map.addOverlay(polyline);          //增加折线

    },
    data () {
        return {

        }
    },
}
</script>

<style scoped>
    .wait-map{
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }
    .BMap_Marker:first-of-type {
        width: 1.706667rem !important;
        height: 2.186667rem !important;
    }

     /*去掉地图左下角的百度LOGO */
    .anchorB {
        display: none !important;
    }
</style>
